<template>
  <div :data-line-cid="cid" class="chart" />
</template>

<script>
/** *
 * 可以考虑每个画一个图分别是独立的chart实例
 * https://www.echartsjs.com/examples/editor.html?c=bar-y-category-stack
 */
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
// import echarts from 'echarts'
import { ChartMixin } from '../mixin'
export default {
  name: 'LineChart',
  mixins: [ChartMixin],
  data() {
    return {
      y: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    }
  },
  methods: {
    more() {
      // 应该获取数据 重新渲染图表
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        // backgroundColor: '#efcaef',
        title: {
          text: ''
        },
        // color: ['linear-gradient(90deg,rgba(194,233,251,1) 0%,rgba(161,196,253,1) 100%)'],
        // color: ['linear-gradient(90deg,rgba(194,233,251,1) 0%,rgba(161,196,253,1) 100%)'],
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: false,
          axisLine: {
            show: false
          },
          //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          // show : false,
          axisTick: {
            show: false
          },
          data: ['职业兴趣测试', '成长环境测试', '多元智能测试', '职业价值观测试', 'MBTI性格测试']
        },
        series: [{
          name: '类型结果',
          type: 'bar',
          stack: '总量',
          data: [3222, 1233, 899, 222, 189],
          barWidth: 32,
          itemStyle: {
            normal: {
              color: new this.$chart.graphic.LinearGradient(
                0, 1, 1, 0,
                [
                  { offset: 0, color: 'rgba(194,233,251,1)' },
                  { offset: 1, color: 'rgba(161,196,253,1)' }
                ]
              )
            }}
        }, {
          name: '类型结果',
          stack: '总量',
          type: 'LinearGradientBar.vue',
          data: [3222, 1233, 899, 222, 189],
          barWidth: 32,
          itemStyle: {
            normal: {
              color: new this.$chart.graphic.LinearGradient(
                0, 1, 1, 0,
                [
                  { offset: 0, color: 'rgba(194,233,251,1)' },
                  { offset: 1, color: 'rgba(161,196,253,1)' }
                ]
              )
            }}
        }]
      })
    }
  }
}
</script>

<style scoped>
.chart {
    width: 600px;
    height: 400px;
}
</style>
